//该文件用于创建Vuex中最为核心的store

//引入vue，import引入的是一个引用，不是拷贝，类似对象a=对象b，所以store引入的Vue使用了Vue.use修改了引入的Vue，main.js引入的Vue也会被修改
import Vue from 'vue';

//引入vuex
import Vuex from 'vuex';

//使用vuex插件，创建vm时就可以传入一个store配置项,最后会出现在vm、vc身上为$store
Vue.use(Vuex);

//准备actions--用于响应组件中的动作
const actions = {
    //因为jia与jian只是将流程传递下去没有进行业务逻辑处理，所以直接在点击事件中commit

    /* jia: function (context, value) {
        //context为上下文对象，一个mini版的store存储的一些方法(给你这个mini版的store是为了方便处理复杂的业务逻辑的时候使用)，例如commit，用于连接上一步与下一步
        //value为传过来的值
        context.commit('JIA', value);
    },
    jian(context, value) {
        context.commit('JIAN', value);
    }, */
    oddjia(context, value) {
        //虽然这里也可以修改state中的数据，但是不要这么做，因为会使开发者工具无法检测到这次修改
        if (context.state.sum % 2 === 0) {
            return;
        } else {
            context.commit('JIA', value);
        }
    },
    delayjia(context, value) {
        setTimeout(() => {
            context.commit('JIA', value);
        }, 500);
    }
};
//准备mutations--用于操作数据(state)
const mutations = {
    JIA: function (state, value) {
        //state就为存储数据的state
        state.sum += value;
    },
    JIAN(state, value) {
        state.sum -= value;
    }
};
//准备state--用于存储数据(内部还给state里面的数据加了响应式，用于监测数据的变化并刷新页面)(提前 在state中初始化好的属性是响应式的；未提前 在state中初始化好的 属性 不是响应式的；info对象中已经添加了新的location属性，但是新增的属性没有被vuex监测，它不是响应式的)(后续新增删除要响应式用Vue.set或Vue.delete)
const state = {
    sum: 0, //当前的和
};

//创建store
/* const store = new Vuex.Store({
    //这三个为对象的简写形式
    actions,
    mutations,
    state
});
//默认暴露 store
export default store;
 */

//创建并暴露store
export default new Vuex.Store({
    //这三个为对象的简写形式
    actions,
    mutations,
    state
});


